<template>
  <div class="child_allowance">


    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="month" label="月度数据">
        <div class="select">
          <el-form :inline="true" :model="form" class="demo-form-inline" size="small">
            <el-form-item>
              <ToolBar :show-all="false"  :show-add="false" :show-edit="false" :add-data="setDialogVisible" :update-data="updateDialogVisible" :add-batch-data="addBatchData"
                        :delete-data="deleteById" :delete-disable="multipleSelection.length<=0"
                        :update-disable="multipleSelection.length!==1"></ToolBar>
            </el-form-item>
            <el-form-item label="补助年月">
              <el-date-picker
                  :clearable="false"
                  v-model="form.subsidyDateTime"
                  type="month"
                  @change="handleCurrentChange(1)"
                  placeholder="选择月">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="员工姓名">
              <el-select v-model="form.jobNos" placeholder="请选择员工姓名..." value-key="id" @change="handleCurrentChange(1)" multiple :collapse-tags="true" style="width: 20vw;"
                         filterable clearable>
                <el-option :label="item.userName+'（'+item.jobNo+'）'" :value="item.jobNo" v-for="item in $store.state.userList"
                           :key="item.id">
                  <span style="float: left">{{ item.userName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNo }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="handleCurrentChange(1)" size="small">筛选</el-button>
          </el-form>
        </div>
        <el-table
            :data="tableData"
            stripe
            border
            @selection-change="handleSelectionChange"
            show-summary
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
          <el-table-column type="selection" width="60" label="序号">
          </el-table-column>
          <el-table-column label="姓名" prop="userName">
          </el-table-column>
          <el-table-column label="工号" prop="jobNo">
          </el-table-column>
          <el-table-column label="子女姓名" prop="childName">
          </el-table-column>
          <el-table-column label="学历" prop="education">
          </el-table-column>
          <el-table-column label="学校" prop="school" min-width="120">
          </el-table-column>
          <el-table-column label="专业" prop="major" min-width="120">
          </el-table-column>
          <el-table-column label="补助金额" prop="subsidyAmount">
          </el-table-column>
          <el-table-column label="入学时间" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.admissionDateTime|formatDateMonth }}
            </template>
          </el-table-column>
          <el-table-column label="毕业时间" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.graduationTime|formatDateMonth }}
            </template>
          </el-table-column>
          <el-table-column label="支撑材料" prop="supportingMaterials">
          </el-table-column>
          <el-table-column label="创建时间" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.createTime|formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="60">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40 ,total]"
              :page-size=size
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="year" label="年度数据">
        <el-form :inline="true">
          <el-form-item label="年份">
            <el-date-picker
                v-model="year"
                type="year"
                size="small"
                placeholder="选择年" @change="handleCurrentChange(1)">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.userName"  clearable @change="handleCurrentChange(1)" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleCurrentChange(1)" type="primary" size="small">筛选</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData2" border :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}">
          <el-table-column label="姓名" prop="userName"></el-table-column>
          <el-table-column label="工号" prop="jobNo"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.1'" prop="january"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.2'" prop="february"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.3'" prop="march"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.4'" prop="april"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.5'" prop="may"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.6'" prop="june"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.7'" prop="july"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.8'" prop="august"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.9'" prop="september"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.10'" prop="october"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.11'" prop="november"></el-table-column>
          <el-table-column :label="year.getFullYear()+'.12'" prop="december"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40 ,total]"
              :page-size=size
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        top="15vh"
        :visible.sync="childAllowance"
        width="50%"
        title="子女补助批量导入"
        center>
      <el-upload
          class="upload-demo"
          drag
          :http-request="uploadChildAllowance"
          auto-upload
          accept=".xlsx,.xls"
           action="#" style="text-align: center!important;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>
        <el-link type="success" href="https://47.109.16.23:28361/down/LUUEgajwcQJO.xlsx" style="margin-top:1rem">
          点击下载子女补贴上传模板
        </el-link>
      </el-upload>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" append-to-body center>
      <div slot="title">
        <h3>提示</h3>
        <h5>上传文件中：
          <el-tag type="info" v-text="allNum"></el-tag>
          条数据，成功导入
          <el-tag type="success" v-text="successNum"></el-tag>
          条数据，失败导入：
          <el-tag type="danger" v-text="errorNum"></el-tag>
          条数据<span v-if="errorNum>0">，错误信息如下：</span></h5>
      </div>
      <el-row>
        <ol v-if="list.length>0" style="text-align: center;height:35vh;overflow-y: scroll;">
          <li v-for="(item,index) in list" style="text-align: left;">
            <span v-text="item" style="width: 350px;overflow: hidden;text-overflow: ellipsis"></span></li>
        </ol>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
import UpLoadDialogComponent from "@/components/common/UpLoadDialogComponent";
import moment from "moment";

export default {
  components: {UpLoadDialogComponent, ToolBar},
  name: "FinParam",
  data() {
    return {
      activeName: "month",
      dialogVisible: false,
      list: [],
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      multipleSelection: [],
      form: {
        subsidyDateTime: moment(moment().subtract(1, "months").startOf('month')).format("YYYY-MM-DD"),
      },
      dialogFormVisible: false,
      formLabelWidth: "80px",
      rules: {
        paramName: [{
          required: true, message: "请输入参数名称...", trigger: "blur"
        }],
        paramCode: [{
          required: true, message: "请输入参数编码...", trigger: "blur"
        }],
        paramValue: [{
          required: true, message: "请输入参数值...", trigger: "blur"
        }],
      },
      isAdd: true,
      childAllowance: false,
      finUserRosterList: [],
      tableData2: [],
      year: new Date(),
    }
  },
  created() {
    this.activeName = this.$store.state.childAllowanceActiveName || "month"
    this.getDataList()
  },
  methods: {
    handleClick(tab, event) {
      this.$store.commit("setChildAllowanceActiveName", this.activeName)
      this.getDataList()
    },
    handleClose(done) {
      console.log("Donw:", done)
      this.$confirm('确认关闭？')
          .then(_ => {
            this.form = {}
            this.dialogFormVisible = false
            done();
          })
          .catch(_ => {
          });
    },
    getUserList() {
      axios.get("/fin_user_roster/list").then(res => {
        console.log("用户：", res.data.data)
        this.finUserRosterList = res.data.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(row) {
      console.log(row);
      this.form = row
      this.setDialogVisible(false)
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$tools.showMessageBox("确认删除" + row.paramName + "(" + row.paramValue + ")？", "操作确认", 'warning').then(confirm => {
        axios.delete("/fin_child_allowance/delete/" + row.id).then(res => {
          if (res.data.success) {
            this.$tools.showMessage("参数" + row.paramName + "(" + row.paramValue + ")删除成功！", "success")
            this.getDataList()
          }
        })

      }).catch(cancel => {
        this.$tools.showMessage("操作已取消！", "info")

      })
    },
    getDataList() {
      switch (this.activeName) {
        case "month":
          this.dialogFormVisible = false
          console.log("查询数据：", this.form)
          axios.post("/fin_child_allowance/list/" + this.currentPage + "/" + this.size, this.form).then(res => {
            console.log("打卡信息：", res)
            if (res.data.success) {
              this.tableData = res.data.data.records
              this.total = res.data.data.total
              this.pages = res.data.data.pages
            } else {
              this.tableData = []
              this.total = 0
              this.pages = 1
            }
          })
          break;
        case "year":
          this.form.year = this.year
          this.form.pageNumber = this.currentPage
          this.form.pageSize = this.size
          axios.post("/fin_child_allowance/list", this.form).then(res => {
            console.log("查询结果：", res)
            if (res.data.success) {
              this.tableData2 = res.data.data.records
              this.total = res.data.data.total
              this.pages = res.data.data.pages
            } else {
              this.tableData2 = []
              this.total = 0
              this.pages = 1

            }
          })
          break;
      }
    }
    ,
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    }
    ,
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    }
    ,
    setDialogVisible(isAdd) {
      this.dialogFormVisible = true
      this.isAdd = isAdd
    }
    ,
    deleteById() {
      console.log("用户扫描删除")
      this.$tools.showMessageBox("确认删除" + this.multipleSelection.length + "条数据？", "批量删除确认", "warning").then(confirm => {
        axios.post("/fin_child_allowance/deleteBatch", this.multipleSelection).then(res => {
          console.log("批量删除结果：", res)
          if (res.data.success) {
            this.$tools.showMessage("删除成功！", "success")
            this.getDataList()
          } else {
            this.$tools.showMessage("删除失败！", "danger")
          }
        })
      }).catch(cancel => {
        this.$tools.showMessage("操作已取消！", "info")
      })
    }
    ,
    updateDialogVisible() {
      this.form = this.multipleSelection[0]
      this.setDialogVisible(false)
    }
    ,
    updateById(form) {
      console.log("用户扫描修改")
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.form.updateUserId = this.$store.state.userInfo.id
          axios.post("/fin_child_allowance/update", this.form).then(res => {
            if (res.data.success) {
              this.$tools.showMessage("修改成功", "success")
              this.dialogFormVisible = false
              this.getDataList()
              this.form = {}
            } else {
              this.$tools.showMessage("修改失败", "danger")

            }
          })
        } else {
          this.$tools.showMessage("请检查您输入的信息...", "warning")
        }
      })
    }
    ,
    addData(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.form.createUserId = this.$store.state.userInfo.id
          axios.post("/fin_child_allowance/add", this.form).then(res => {
            if (res.data.success) {
              this.$tools.showMessage("添加成功", "success")
              this.dialogFormVisible = false
              this.getDataList()
            } else {
              this.$tools.showMessage("添加失败", "danger")

            }
          })

        } else {
          this.$tools.showMessage("请检查您输入的信息...", "warning")
        }
      })
    }
    ,
    addBatchData() {
      console.log("批量添加")
      this.childAllowance = true
    }
    ,
    uploadChildAllowance(res) {
      console.log(res)
      let formData = new FormData();
      formData.append("file", res.file)
      axios({
        method: "POST",
        url: "/fin_child_allowance/addBatch/" + this.$store.state.userInfo.id,
        headers: {
          'content-type': 'multipart/form-data',
        },
        data: formData
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          let successNum = parseInt(res.data.data.successNum);
          let errorNum = parseInt(res.data.data.errorNum);
          let allNum = successNum + errorNum
          if (errorNum > 0) {
            let list = res.data.data.list
            this.successNum = successNum;
            this.errorNum = errorNum
            this.allNum = allNum;
            this.list = list
            this.dialogVisible = true
          } else {
            this.childAllowance = false
            this.getDataList()
            this.$message({
              dangerouslyUseHTMLString: true,
              message: "成功上传<b>" + allNum + "</b>条数据",
              type: "success"
            })
          }
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.data.message,
            type: "error"
          })
        }
      })
    }
    ,
  }
}
</script>


<style lang="less">
.child_allwance {
  .select {
    display: inline-flex !important;
  }
}

.has-gutter {
  .el-table__cell {
    text-align: center !important;
  }
  .cell{
    text-align: center!important;
  }
}
</style>
